<template>
  <div id="app">
    <h1>商品列表</h1>
    <button @click="sortByPriceAscending">按价格升序排序</button>
    <button @click="sortByPriceDescending">按价格降序排序</button>
    <ul>
      <li v-for="item in sortedItems" :key="item.name">
        <img :src="item.img" alt="" style="width: 30px; height: 30px;">
        <div>{{ item.name }} </div>
        <div>{{ item.price }} </div>

      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';


const items = ref([
  {
    name: "玫瑰",
    size: "55CM",
    brand: "品牌玫瑰",
    price: "18.7",
    img: "https://picsum.photos/200/300?1",
    quantity: 0,
    category: "玫瑰",
  },
  {
    name: "向日葵",
    size: "55CM",
    brand: "品牌向日葵",
    price: "18.7",
    oldPrice: "19.2",
    img: "https://picsum.photos/200/300?2",
    quantity: 0,
    category: "向日葵",
  },
  {
    name: "夜莺",
    size: "55CM",
    brand: "品牌夜莺",
    price: "30.7",
    img: "https://picsum.photos/200/300?3",
    quantity: 0,
    category: "夜莺",
  },
  {
    name: "康乃馨",
    size: "55CM",
    brand: "品牌夜莺",
    price: "25.7",
    img: "https://picsum.photos/200/300?4",
    quantity: 0,
    category: "康乃馨",
  },
  {
    name: "百合",
    size: "55CM",
    brand: "品牌百合",
    price: "26.7",
    img: "https://picsum.photos/200/300?5",
    quantity: 0,
    category: "百合",
  },
  {
    name: "菊花",
    size: "55CM",
    brand: "品牌夜莺",
    price: "15.7",
    img: "https://picsum.photos/200/300?6",
    quantity: 0,
    category: "菊花",
  },
  {
    name: "绣球花",
    size: "55CM",
    brand: "品牌夜莺",
    price: "10.7",
    img: "https://picsum.photos/200/300?7",
    quantity: 0,
    category: "绣球花",
  },
  {
    name: "洋桔梗",
    size: "55CM",
    brand: "品牌夜莺",
    price: "40.7",
    img: "https://picsum.photos/200/300?8",
    quantity: 0,
    category: "洋桔梗",
  },
  {
    name: "草花",
    size: "55CM",
    brand: "品牌夜莺",
    price: "35.7",
    img: "https://picsum.photos/200/300?9",
    quantity: 0,
    category: "草花",
  },
  // { id: 1, name: '苹果', price: 5, img: "/public/images/free01.png" },
  // { id: 2, name: '香蕉', price: 2, img: "/public/images/free02.png" },
  // { id: 3, name: '橙子', price: 4, img: "/public/images/free03.png" },
  // { id: 4, name: '葡萄', price: 6, img: "/public/images/free04.png" },
]);
const sortedItems = ref([...items.value]);

const sortByPriceAscending = () => {
  console.log('升序', sortedItems.value);
  sortedItems.value = [...items.value].sort((a, b) => a.price - b.price);
};

const sortByPriceDescending = () => {
  console.log('降序', sortedItems);
  sortedItems.value = [...items.value].sort((a, b) => b.price - a.price);
};
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  margin-top: 60px;
}

button {
  margin: 5px;
}
</style>